<template>
  <footer class="relative text-white">
    <div class="max-w-300 mx-auto py-8 md:py-16 px-8 md:px-0">
      <!-- 网格布局，四列：Services / Resources / About Us / Contact Us + Logo & Quote -->
      <div class="grid grid-cols-1 md:grid-cols-10 gap-6">
        <!-- 第一列：Services -->
        <div class="md:col-span-2">
          <h2 class="font-semibold text-5 border-b-2 mb-4">Services</h2>
          <ul class="space-y-4">
            <li><a href="/cnc-machining" class="hover:text-red-650">Rapid CNC Machining</a></li>
            <li><a href="/plastic-injection-molding" class="hover:text-red-650">Plastic Injection Molding</a></li>
            <li><a href="/rapid-tooling" class="hover:text-red-650">Rapid Tooling Making</a></li>
            <li><a href="/rapid-prototyping" class="hover:text-red-650">Rapid Prototyping</a></li>
            <li><a href="/compression-molding" class="hover:text-red-650">Compression Molding</a></li>
            <li><a href="/sheet-metal" class="hover:text-red-650">Sheet Metal</a></li>
            <li
              class="group relative"
              @mouseenter="open = true"
              @mouseleave="open = false"
              @focusin="open = true"
              @focusout="open = false"
            >
              <a href="#" class="group-hover:text-red-650 flex items-center" @click.prevent>
                Industries
                <svg
                  t="1735616406238"
                  class="icon rotate-90 group-hover:rotate-0 fill-current ml-2 transition-transform"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="9545"
                  width="12"
                  height="12"
                >
                  <path d="M192 128 832 512 192 896z" p-id="9546"></path>
                </svg>
              </a>
              <transition
                enter-active-class="transition ease-out duration-200 transform"
                enter-from-class="opacity-0 -translate-y-2"
                enter-to-class="opacity-100 translate-y-0"
                leave-active-class="transition ease-out duration-200"
                leave-from-class="opacity-100"
                leave-to-class="opacity-0"
              >
                <ul v-if="open" class="py-2  px-4  bg-gray-650 text-gray-200 absolute bottom-0 left-full text-nowrap" @click.stop>
                  <li>
                    <a href="/industries/automotive" class="hover:text-red-650 leading-8 ">Automotive Industry</a>
                  </li>
                  <li>
                    <a href="/industries/aerospace" class="hover:text-red-650 leading-8">Aerospace Industry</a>
                  </li>
                  <li>
                    <a href="/industries/medical-device-and-dental" class="hover:text-red-650 leading-8">Medical Device and Dental Industry</a>
                  </li>
                  <li>
                    <a href="/industries/consumer-products" class="hover:text-red-650 leading-8">Consumer Products Industry</a>
                  </li>
                  <li>
                    <a href="/industries/security" class="hover:text-red-650 leading-8">Security Industry</a>
                  </li>
                  <li>
                    <a href="/industries/robotics" class="hover:text-red-650 leading-8">Robotics Industry</a>
                  </li>
                </ul>
              </transition>
            </li>
          </ul>
        </div>

        <!-- 第二列：Resources -->
        <div>
          <h2 class="font-semibold text-5 border-b-2 mb-4">Resources</h2>
          <ul class="space-y-4">
            <li><a href="/case-studies" class="hover:text-red-650">Case Studies</a></li>
            <li><a href="/faqs" class="hover:text-red-650">FAQs</a></li>
            <li><a href="/blogs" class="hover:text-red-650">Blogs</a></li>
          </ul>
        </div>

        <!-- 第三列：About Us -->
        <div class="md:col-span-2">
          <h2 class="font-semibold text-5 border-b-2 mb-4">About Us</h2>
          <ul class="space-y-4">
            <li><a href="/about-us#overview" class="hover:text-red-650">Who We Are</a></li>
            <li><a href="/about-us#factory" class="hover:text-red-650">Factory Tour</a></li>
            <li><a href="/about-us#advantage" class="hover:text-red-650">Advantage</a></li>
            <li><a href="/about-us#trusted" class="hover:text-red-650">Trusted by Innovative Companies</a></li>
          </ul>
        </div>

        <!-- 第四列：Contact Us -->
        <div class="md:col-span-3">
          <h2 class="font-semibold text-5 border-b-2 mb-4">Contact Us</h2>
          <p class="mb-2">
            <strong>Email:</strong>
            <a href="mailto:andy@csmolding.com" class="hover:text-red-650"> lionlee@maxpreciseglobal.com </a>
          </p>
          <p class="mb-2">
            <strong>Tel:</strong>
            <span> +86 13172452278 </span>
          </p>
          <p class="mb-4">
            <strong>Address:</strong> Yisha Road,Shatian Town,Dongguan City,Guangdong Province
          </p>
          <!-- 社交图标 + 按钮，可以放在这里，或者单独放到右侧 -->
          <!-- 如果想和 logo + 按钮放一起，可以将此列缩减，或者另设一列 -->
        </div>

        <!-- 第五列：品牌 Logo -->
        <div class="md:col-span-2">
          <!-- 品牌 Logo -->
          <div class="mb-4 md:mb-16">
            <!-- 假设有个 logo.png -->
            <img src="@/images/logo.jpg" alt="CSMold Logo" class="h-28 object-contain" />
          </div>

          <!-- 社交图标 & “Get An Instant Quote” 按钮 -->
          <div class="flex items-center space-x-8">
            <!-- 社交图标 -->
            <a href="https://www.facebook.com/profile.php?id=61569417629091" target="_blank" class="hover:text-gray-300" aria-label="Facebook">
              <svg
                t="1735615488150"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="9339"
                width="32"
                height="32"
              >
                <path
                  d="M512 0C794.784 0 1024 229.216 1024 512 1024 773.088 828.576 988.544 576 1020.032L576 640 752 640 768 512 576 512 576 448C576 412.64 604.64 384 640 384L768 384 768 256 640 256C533.952 256 448 341.952 448 448L448 512 352 512 352 640 448 640 448 892.992 448 1007.872 448 1020.032C195.424 988.544 0 773.088 0 512 0 229.216 229.216 0 512 0Z"
                  fill="#ffffff"
                  p-id="9340"
                ></path>
              </svg>
            </a>
            <a
              href="https://x.com/DiDoutech1986"
              target="_blank"
              class="hover:text-gray-300"
              aria-label="Twitter"
            >
              <svg
                t="1735615368013"
                class="icon"
                viewBox="0 0 1025 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="8927"
                width="32"
                height="32"
              >
                <path
                  d="M1024.032 194.432c-37.664 16.704-78.176 28-120.672 33.088 43.36-26.016 76.672-67.168 92.384-116.224-40.608 24.064-85.568 41.568-133.408 50.976-38.336-40.832-92.928-66.336-153.344-66.336-116.032 0-210.08 94.048-210.08 210.08 0 16.48 1.856 32.512 5.44 47.872-174.592-8.768-329.408-92.416-433.024-219.52-18.08 31.04-28.448 67.104-28.448 105.632 0 72.896 37.088 137.184 93.472 174.88-34.432-1.088-66.816-10.528-95.168-26.272-0.032 0.864-0.032 1.76-0.032 2.656 0 101.792 72.416 186.688 168.512 206.016-17.632 4.8-36.192 7.36-55.36 7.36-13.536 0-26.688-1.312-39.52-3.776 26.752 83.456 104.32 144.192 196.256 145.888-71.904 56.352-162.496 89.92-260.928 89.92-16.96 0-33.664-0.992-50.112-2.944 92.96 59.616 203.392 94.4 322.048 94.4 386.432 0 597.728-320.128 597.728-597.76 0-9.12-0.192-18.176-0.608-27.168C960.256 273.536 995.872 236.544 1024.032 194.432z"
                  fill="#ffffff"
                  p-id="8928"
                ></path>
              </svg>
            </a>
            <a
              href="https://www.youtube.com/@MaxpresiceGlobal"
              target="_blank"
              class="hover:text-gray-300"
              aria-label="YouTube"
            >
              <svg
                t="1735615427513"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="9133"
                width="32"
                height="32"
              >
                <path
                  d="M832 128 192 128c-105.6 0-192 86.4-192 192l0 384c0 105.6 86.4 192 192 192l640 0c105.6 0 192-86.4 192-192L1024 320C1024 214.4 937.6 128 832 128zM384 768 384 256l320 256L384 768z"
                  fill="#ffffff"
                  p-id="9134"
                ></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>

    <div class="footer-end">
      <span>Maxprecise Global</span>
      <span class="ml-24">Copyright © 2025. All rights reserved.</span>
    </div>
  </footer>
</template>

<script setup>
import { ref } from 'vue'

const open = ref(false)
</script>

<style scoped>
footer {
  background-color: #2d2d2d;
}

.footer-content {
  color: #ffffff;
  height: 446px;
}

.footer-end {
  background-color: #4b4b4b;
  height: 33px;
  width: 100%;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 13px;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 13px;
}
</style>
